<script setup>
import Header from '@/components/header/Header.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { city } from '@/utils/RegionCN/city.js'
const user = ref({
  name: '李田所',
  id: '114514',
  type: '教师',
})

// do not use same name with ref
const form = reactive({
  sex: '',
  hometown: [],
  school: '默认学校',
  birthday: '',
})

const onSubmit = () => {
  ElMessage({
    message: '对接接口上传',
    type: 'success',
  })
}

const openChangeName = () => {
  ElMessageBox.prompt('请输入新的用户名', '修改用户名', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputErrorMessage: '用户名不能为空',
    inputPattern: /\S/,
  })
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `对接接口：用户名已更改为：${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消输入',
      })
    })
}

</script>

<template>
  <div class="user-center gradint-background">
    <Header>教师用户中心</Header>
    <div class="profile">

      <div class="avatarCard">
        <el-card class="box-card" shadow="hover" :body-style="{ width:'100%' }">
          <div class="profile-bg">
            <img src="@/assets/whu.png" alt="背景图" class="profile-bg-img">
          </div>
          <div class="profile-content">
            <div class="profile-left">
              <div class="avatar">
                <img src="@/assets/vue.svg" alt="Avatar" class="avatar-img">
              </div>
              <div class="user-name">
                <span>{{ user.name }}</span>
              </div>
              <div class="change-usrname" @click="openChangeName">修改用户名</div>
            </div>
            <h1 style="color: red; display: flex; align-items: center;">等待学生端功能完善、和后端对接完毕后，再复用!</h1>
            <div class="profile-right">
              <div class="user-type">
                <el-tag type="success" size="large" hit="1">{{ user.type }}</el-tag>
              </div>
              <div class="account-id">
                <span>账号：</span>
                <span>{{ user.id }}</span>
              </div>
            </div>
          </div>

        </el-card>
      </div>
    </div>
    <div class="detail">
      <div class="detailCard">
        <el-card class="box-detail-card" shadow="hover">

          <el-form :model="form" label-width="auto" style="max-width: 600px">

            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio value="1">男</el-radio>
                <el-radio value="2">女</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="生日">
              <el-col :span="11">
                <el-date-picker v-model="form.birthday" type="date" placeholder="选择一天" style="width: 100%" />
              </el-col>
            </el-form-item>

            <el-form-item label="家乡">
              <div class="region-selector">
                <el-cascader placeholder="尝试搜索" v-model="form.hometown" :options="city" filterable />
              </div>
            </el-form-item>

            <el-form-item label="学校">
              <el-input v-model="form.school" />
            </el-form-item>

            <div class="buttons">
              <el-form-item style="display: flex; justify-content: center;">
                <el-button type="primary" @click="onSubmit" size="large">保存</el-button>
              </el-form-item>
            </div>

          </el-form>
        </el-card>
      </div>
    </div>
  </div>

</template>

<style scoped>
.user-center {
  overflow-y: scroll;
}

.profile{
  animation: top-in 0.6s;
}
.detail {
  animation: bottom-in 0.6s;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

.detail {  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

.profile-left {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* transform: translateY(-30%); */
  margin-top: -70px;
  z-index: 1;
}

.profile-right {
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items: flex-end;
}
.user-type{
  margin-top: 15px;

}
.avatarCard,
.detailCard {
  background-color: #fff;
  width: 70%;
  /* border-style: ridge; */

}
.box-card{
  display: flex;
}
.avatarCard{
  z-index: 2;
}

.detailCard {}
.profile-bg{
  z-index: 0;
}
.profile-bg .profile-bg-img {
  min-height: 150px;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  filter: blur(3px);
  z-index: 0;
}
.avatar {
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  
  
}
.avatar img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 5px;
  border: 2px solid #fff;
}
.profile-content{
  display: flex;
  justify-content: space-between;
}
.user-name {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;

}
.account-id{
  margin-top: 10px;
  font-size: 13px;
  color: #808080;
}

.box-detail-card {

  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: center;

}

.change-usrname {
  font-size: small;
  color: #808080;
  text-decoration: underline;
  cursor: pointer;
}
</style>